<template>
	<view class="login-page">
		<view class="top-bg">
			<image class="login-pic" src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/login-bg-ys.png"></image>
			<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/systeam/images/car.png" class="car"></image>
		</view>
		<view class="main-content">
			<view class="accounts-login">
				<view class="list">
					<view class="ipt-box">
						<input type="text" placeholder='请输入姓名' v-model="formItem.name" class="ipt" maxlength="11">
					</view>
				</view>
				<view class="list">
					<view class="ipt-box">
						<input type="number" placeholder='请输入手机号' v-model="formItem.phone" class="ipt" maxlength="11">
					</view>
				</view>
				<view class="list">
					<view class="ipt-box">
						<input type="text" placeholder="请输入验证码" class="ipt" maxlength="4" v-model="formItem.vcode">
						<view class="get-code" :class="codeText=='获取验证码' || codeText=='重新获取'?'color-ff8533':'color-999'" @click="getPhoneCode">{{codeText}}</view>
					</view>
				</view>
				<view class="list">
					<view class="ipt-box">
						<view type="text" placeholder='请输入地区' class="ipt" @click="openArea" :class="{'uniActive': formItem.provincialCityDistrict == '请选择地区'}">{{ formItem.provincialCityDistrict }}</view>
					</view>
				</view>
				
				<view class="list">
					<view class="ipt-box">
						<input type="text" placeholder='请输入车型' v-model="formItem.carDiy" class="ipt" >
					</view>
				</view>
				
				<view class="agreement">
					<u-checkbox v-model="radioValue" shape="circle" active-color="#FF8533">
						<view class="flex-align-center font-s-12 color-999">本人已阅读并同意<navigator url="/pages/empower" class="col">《个人信息授权协议》</navigator>与
						<navigator url="/pages/privacy" class="col">《隐私协议》</navigator></view>
					</u-checkbox>
				</view>
				<view class="btn" @click="doLoginMobile">提交</view>
			</view>
		</view>
		<view class="tips">
			<view>温馨提醒：</view>
			<view>·务必本人操作并提供真实有效的信息，相关信息将作为您的租赁要素；</view>
			<view>·租赁有风险，操作需谨慎；请根据个人需求及自身收入情况合理租赁，理性消费。</view>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒后重新获取" unique-key="login"></u-verification-code>
		
		<view class="pop-section" v-if="showPop">
			<view class="pop-box">
				<image src="../static/delete.png" class="close" @click="showPop = false"></image>
				<image src="../static/success.png" class="success-pic"></image>
				<view class="title">提交成功</view>
				<view class="sub">客服人员在24小时内致电与您联系</view>
				<view class="getIt" @click="showPop = false">我知道啦</view>
			</view>
		</view>
		
		<u-picker round="10" v-model="showArea" title="选择地址" ref="uPicker" @confirm="getAddress"
			@cancel="showArea=false"closeOnClickOverlay @close="showArea=false" mode="region" :params="{province: true,city: true}"></u-picker>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPop: false,
				showArea:false,
				radioValue: false,
				formItem: {
					name: '',
					phone: '',
					channelId: '',
					vcode: '',
					provincialCityDistrict: '请选择地区',
					carDiy: '',
				},
				updateForm: {},
				codeText:'获取验证码'
			}
		},
		onLoad(options) {
			this.formItem.channelId = options.id || 100023
			
			
			this.$request({
				url: '/ChannelController/tjUV',
				method: 'get',
				data: {
					channelId: this.formItem.channelId
				}
			}).then(res => {
				
			})
		},
		methods: {
			openArea(){
				console.log(222)
				this.showArea = true
				//this.$refs.dialog.show = true
			},
			getAddress(e) {
			    console.log('选择的地址是', e);
				this.formItem.provincialCityDistrict = e.province.label+','+e.city.label
			    //this.location = e
			},
			getPhoneCode(){
				if (!this.formItem.phone){
					uni.showToast({
						title: '请填写账号',
						icon: 'none'
					})
					return false
				}
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						mask:true
					})
					this.$request({
						url: '/ClientUserController/sendSMSVcode',
						method: 'get',
						data: this.formItem
					}).then(res => {
						if(res.code==200){
							uni.showToast({
								title: '验证码已发送',
								icon: 'none'
							})
							this.$refs.uCode.start();
						}
					})
				}
			},
			doLoginMobile(){
				if(!this.radioValue){
					uni.showToast({
						title: '请阅读并且勾选相关协议',
						icon: 'none'
					})
					return false
				}
				
				if (!this.formItem.phone){
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return false
				}
				
				if (!this.formItem.vcode){
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					return false
				}
				this.$request({
					url: '/ClientUserController/verifyVCode',
					method: 'get',
					data:this.formItem
				}).then(res => {
					if(res.code==200){
						// let loginObj = {
						// 	phone: this.formItem.phone,
						// 	channelId:this.formItem.channelId,
							
						// }
						let loginObj = res.data
						uni.setStorageSync('loginObj',JSON.stringify(loginObj))
						/*uni.navigateTo({
							url: '/pages/fill-info'
						})*/
						this.showPop = true
					}
				})
			},
			codeChange(text){
				this.codeText = text;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	page { background-color: #fff; }
	.top-bg {
		position: relative;
		
		.login-pic {
			
			width: 100%;
			height: 720rpx;
		}
		
		.car {
			position: absolute;
			bottom: 16px;
			right: 0;
			z-index: 10;
			width: 438rpx;
			height: 344rpx;
		}
	}
	
	.main-content {
		position: relative;
		margin-top: -60rpx;
		z-index: 2;
		padding: 48rpx 24rpx 0rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0 0;
		.accounts-login {
			background: #FFFFFF;
			border-radius: 32rpx;
			.list {
		
				.text {
					font-size: 24rpx;
					font-weight: bold;
					color: #666666;
					line-height: 24rpx;
				}
		
				.ipt-box {
					padding: 0 24rpx;
					display: flex;
					align-items: center;
					height: 88rpx;
					margin-bottom: 32rpx;
					border-radius: 16rpx;
					border: 2rpx solid #EBEBEB;
		
					.ipt {
						height: 32rpx;
						line-height: 32rpx;
						font-size: 32rpx;
						flex: 1;
					}
					
					.uniActive {
						color: #888;
					}
		
					.get-code {
						padding-left: 24rpx;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 28rpx;
						&.color-ff8533{
							color: #FF8533;
						}
					}
				}
			}
		}
		
		.agreement {
			margin-bottom: 44rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
			.col {
				display: inline;
				color: #FF8533;
			}
		}
		
		.btn {
			height: 96rpx;
			background: #FF8533;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}
	}
	
	.tips {
		padding:38rpx 32rpx;
		font-size: 24rpx;
		color: #666666;
		line-height: 40rpx;
		
		view {
			line-height: 48rpx;
		}
	}
	
	.pop-section {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		
		.pop-box {
			position: relative;
			width: 654rpx;
			height: 532rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			text-align: center;
			padding-top: 48rpx;
			
			.title {
				margin-top: 40rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #292929;
				line-height: 36rpx;
				font-weight: bold;
			}
			
			.sub {
				margin-top: 24rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 28rpx;
			}
			
			.getIt {
				margin: 48rpx auto 0 auto;
				width: 494rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #FF8533;
				border-radius: 46rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
			
			.close {
				position: absolute;
				top: 40rpx;
				right: 40rpx;
				z-index: 2;
				width: 40rpx;
				height: 40rpx;
			}
			
			.success-pic {
				margin: 0 auto;
				width: 190rpx;
				height: 176rpx;
			}
		}
	}
</style>
